<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>双向绑定循环</title>
		<script type="text/javascript" src="js/knockout-3.4.0.js" ></script>
	</head>
	<body>
		<h1>模拟通过ajax请求数据后的局部刷新</h1>
		<div id="_bindDemo">
			框架数量<span data-bind="text: count"></span>
			<table border="1">
				<thead>
					<tr>
						<th>框架名称</th>
						<th>难度</th>
					</tr>
				</thead>
				<tbody data-bind="foreach: items">
					<tr>
						<td data-bind="text: framework"></td>
						<td data-bind="text: stars"></td>
					</tr>
				</tbody>
			</table>
		</div>
		<input type="button" value="修改" onclick="refreshData()"/>
	</body>
	<script type="text/jscript">
		// 模拟第一次ajax请求数据
		var data1 = {
			count: 2,
			items: [
				{
					framework: 'Knockout',
					stars: 5 
				},
				{
					framework: 'JQuery',
					stars: 3
				}
			]
		};
		// 模拟第二次ajax请求数据
		var data2 = {
			count: 3,
			items: [
				{
					framework: 'Spring',
					stars: 4 
				},
				{
					framework: 'Struts2',
					stars: 3
				},
				{
					framework: 'MyBatis',
					stars: 1
				}
			]
		};
		
		var data = data1;
		data.count = ko.observable(data1.count);
		data.items = ko.observableArray(data1.items);
		
		ko.applyBindings(data, document.getElementById('_bindDemo'));
		
		function refreshData(){
			data.count(data2.count);
			data.items(data2.items);
		}
	</script>
</html>
